<template lang="html">
  <div class="flex-main">
    <div class="flex-body">
      <div class="m-search">
        <form class="m-form"  @submit="onSubmit($event)">
          <i  @click="onSubmit($event)"></i>
          <input type="text" class="m-input" name="search" v-model="inputVal" placeholder="请输入查询名称">
          <template v-if="tabshow == 1">
            <em @click="tabchange(2)"></em>
          </template>
          <template v-else="tabshow == 2">
            <span @click="tabchange(1)"></span>
          </template>
        </form>
      </div>
      <template v-if="tabshow == 1">
      <div class="m-content">

        <div class="m-list" v-for="(item,index) in ShopList" :key="index">
          <div class="m-listTop">
            <img src='@/assets/appointment/appointment_shop.png' mode='widthFix'>
            <!-- <img :src="item.ShopImg?BASE_URL+item.ShopImg:require('@/assets/appointment/appointment_shop.png')" alt="" mode='widthFix'> -->
            <span @click="goPage(item.id,item.Shop)">点击预约</span>
          </div>
          <div class="m-listBottom">
            <div class="m-listBottom-top">
              <p>{{item.Shop}}</p>
              <div class="m-listBottom-topRight" @click="callPhone(item.Tel)">
                {{item.Tel}}
                <i></i>
              </div>
            </div>
            <div class="m-listBottom-bottom" @click="goMap(item.location)">
              <i></i>
              {{item.Address}}
            </div>

          </div>

        </div>

      </div>
      </template>
      <template v-else="tabshow == 2">
        <div class="tab">
          <div class="m-content-tab" v-for="(item,index) in ShopList" :key="index">
            <div class="m-list">
              <img src='@/assets/appointment/appointment_shop.png' mode='widthFix'>
              <!-- <img :src="item.ShopImg?BASE_URL+item.ShopImg:require('@/assets/appointment/appointment_shop.png')" alt="" mode='widthFix'> -->
              <div class="m-list-center">
                <p class="shopname">{{item.Shop}}</p>
                <span><i></i><p @click="goMap(item.location)">{{item.Address}}</p></span>
                <span><i></i><p @click="callPhone(item.Tel)">{{item.Tel}}</p></span>
              </div>
              <em @click="goPage(item.id,item.Shop)"></em>
            </div>

          </div>

        </div>
      </template>
      <template v-else="tabshow == 3">
        <no-data :title="'暂无预约门店'" v-if="ShopList.length == 0"></no-data>
      </template>
    </div>
    <footer-nav class="flex-bottom"></footer-nav>
  </div>
</template>

<script>
import {ShopBanner} from '@/api/appointment.js';//- 封装接口
import { Indicator } from 'mint-ui';//- mint-ui插件
// let BASE_URL = process.env.API_HOST;
export default {
  name: '',
  data(){
    return{
      tabshow: 1,//- tab显示切换
      ShopList: [],//- 门店列表数据
      BASE_URL: process.env.API_HOST,//- 拼接url地址
      inputVal: '',//- 搜索关键字查询
    }
  },
  methods: {
    //- 页面切换
    tabchange(obj) {
      // console.log(obj);
      this.tabshow=obj;
    },
    //- 点击前往其他页面
    goPage(shopid,shopname) {
      this.$router.push({path: '/appointment_time',query:{ shopid:shopid,shopname:shopname}});
    },
    //- 点击拨打电话号码
    callPhone(tel) {
      console.log(tel);
      window.location.href = 'tel:' + tel;
    },
    //- 前往微信地图地址
    goMap(map) {
      console.log(map);
      wx.openLocation({
          latitude: parseFloat(map.lat),
          longitude: parseFloat(map.lng),
          scale: 18,
      });
    },
    //- 查询门店列表
    onSubmit(event) {
      let that = this;
      event.preventDefault();
      ShopBanner({test:that.inputVal}).then(res=>{
        let data = res.list;
        if(data.length==0){
            that.tabshow = 0;
        }
        that.ShopList = data;

      });
    }




  },
  mounted() {
    Indicator.open('加载中...');
    // 分类
    let that = this;
    ShopBanner({test:that.inputVal}).then(res=>{
      let data = res;
      that.ShopList = data.list;
      Indicator.close();
    });
  }
}
</script>

<style lang="less" scoped src="@/less/appointment/appointment.less"></style>
